<template>
	<view class="index-controller">
		<web-header :select_name="'home'" :is_home='true'></web-header>
		<view class="content_template">
			<!-- 左侧内容 -->
			<view class="content_left">
				<!-- <uni-section  title="响应式布局" subTitle="共五个响应尺寸：xs、sm、md、lg 和 xl" type="line">
					<view class="example-body">
						<uni-row class="demo-uni-row" :gutter="gutter">
							<uni-col :xs="0" :sm="6" :md="4" :lg="3" :xl="1">
								<view class="demo-uni-col dark">
														222
													</view>
							</uni-col>
							<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
								<view class="demo-uni-col light"></view>
							</uni-col>
							<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
								<view class="demo-uni-col dark"></view>
							</uni-col>
							<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
								<view class="demo-uni-col light"></view>
							</uni-col>
						</uni-row>
					</view>
				</uni-section> -->

				<view class="banner">

					<u-swiper class="bann1" :radius='0' @change='banner_change' :current="swiper_current"
						:effect3d="true" height='495rpx' :list="banners" keyName="imgUrl" @click="banner_click">
					</u-swiper>
					<u-swiper class="bann2" :radius='0' @change='banner_change' :current="swiper_current"
						:effect3d="true" height='388rpx' :list="banners" keyName="imgUrl" @click="banner_click">
					</u-swiper>
					<image @click="swiper_action(-1)" src="/static/2.1/banner_left.png" class="switch_left"></image>
					<image @click="swiper_action(1)" src="/static/2.1/banner_right.png" class="switch_right"></image>
				</view>
				<!-- 标题模板 -->
				<view class="data_list">
					<view class="header_title  ">
						<view class="header">
							<view class="title">热门资讯</view>
							<navigator url="/pages/article/article">
								<image src="/static/2.1/btn_more.png"></image>
								<text class="more">更多</text>
							</navigator>
						</view>
						<view class="line"></view>
					</view>

					<view class=" ">
						<!-- 热门资讯模板 -->
						<view v-for="(item,index) in specialColumnDataHot" @click="specialColumnDataHot_click(item)">
							<article-cell :item="item">
							</article-cell>
							<view v-if="index == 2">
								<image class="ad_01" src="/static/2.2/ad_01.png"></image>
							</view>
						</view>

					</view>


					<!-- 标题模板 -->
					<view class="header_title  ">
						<view class="header">
							<view class="title">海外新药</view>
							<navigator url="/pages/new_drugs/new_drugs">
								<image src="/static/2.1/btn_more.png"></image>
								<text class="more">更多</text>
							</navigator>
						</view>
						<view class="line"></view>
					</view>

					<view class=" ">
						<!-- 海外新药模板 -->
						<view v-for="item in overseasHot" @click="overseasHot_click(item)">
							<new-drugs-cell :item="item"></new-drugs-cell>
						</view>

					</view>

					<!-- 标题模板 -->
					<view class="header_title  ">
						<view class="header">
							<view class="title">商城</view>
							<navigator url="/pages/mall/mall">
								<image src="/static/2.1/btn_more.png"></image>
								<text class="more">更多</text>
							</navigator>
						</view>
						<view class="line"></view>
					</view>

					<!-- 商城模板 -->
					<view class="mall_list  ">
						<!-- <view class="mall_cell" v-for="i in 2">
						<image class="img"></image>
						<view class="name">
							资深护工居家护理  夜间陪护
						</view>
					</view> -->
						<view v-for="item in storeServiceHot" @click="mall_cell_click(item)">
							<mall-cell :item="item"></mall-cell>
						</view>

					</view>


					<!-- 标题模板 -->
					<view class="header_title  ">
						<view class="header">
							<view class="title">同情用药</view>
							<navigator url="/pages/information/information">
								<image src="/static/2.1/btn_more.png"></image>
								<text class="more">更多</text>
							</navigator>
						</view>
						<view class="line"></view>
					</view>

					<view class=" ">
						<!-- 同情用药模板 -->
						<view @click='sympathizingHot_click(item)' v-for="(item,index) in sympathizingHot">
							<information-cell :item="item"></information-cell>
							<view v-if="index == 2">
								<image class="ad_02" src="/static/2.2/ad_02.png"></image>
							</view>
						</view>

					</view>
					
					<view class="h5_show"> 
						<!-- 标题模板 -->
						<view class="header_title">
							<view class="header">
								<view class="title">临床招募</view>
								<navigator url="/pages/clinical_recruitment/clinical_recruitment">
									<image src="/static/2.1/btn_more.png"></image>
									<text class="more">更多</text>
								</navigator>
							</view>
							<view class="line"></view>
						</view>
						
						<view class=" ">
							<!-- 临床招募模板 -->
							<view @click='open_clinical_recruitment_info(item)' v-for="(item,index) in clinicalRecruitmentList">
								<clinical-recruitment-cell :item="item"></clinical-recruitment-cell>
								 
							</view>
						
						</view>
					</view>
				</view>


			</view>

			<!-- 右边模板 -->
			<view class="content_right">
				<filtrate-card></filtrate-card>

				<!-- 标题模板 -->
				<view class="header_title">
					<view class="header">
						<view class="title">临床招募</view>
						<navigator url="/pages/clinical_recruitment/clinical_recruitment">
							<image src="/static/2.1/btn_more.png"></image>
							<text class="more">更多</text>
						</navigator>
					</view>
					<view class="line"></view>
				</view>

				<view class="recruiting_list">
					<view class="recruiting_cell" @click="open_clinical_recruitment_info(item)"
						v-for="item in clinicalRecruitmentList">
						<view class="left">
							<view class="point"></view>
							<view class="line"></view>
						</view>
						<view class="name">{{item.title}}</view>

					</view>


				</view>


			</view>

		</view>



		<web-foot></web-foot>
		<uni-popup ref="popup" type="bottom">
			<view class="mall_pop">
				<view class="close" @click="mall_close">
					<image src="/static/2.1/close.png"></image>
		
				</view>
				<view class="mall_info">
					<image src="/static/2.1/pop_mall.png"></image>
		
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import web_header from '@/components/web-header.vue'
	import web_foot from '@/components/web-foot.vue'
	import filtrate_card from '@/components/filtrate_card.vue'
	// import information_cell from '@/components/information_cell/information_cell.vue'

	export default {

		components: {
			'web-header': web_header,
			'web-foot': web_foot,
			'filtrate-card': filtrate_card,
			// 'information-cell':information_cell
		},
		data() {
			return {
				swiper_current: 0,
				old_swiper_current: 0,
				title: 'Hello',
				banners: [],
				specialColumnDataHot: [],
				overseasHot: [],
				storeServiceHot: [],
				sympathizingHot: [],
				clinicalRecruitmentList: []
			}
		},
		onLoad() {
			this.get_data()
		},
		methods: {
			navigator_url(url) {
				uni.navigateTo({
					url: url
				})
			},
			mall_cell_click() {
				this.$refs.popup.open('center')
			
			},
			mall_close() {
				this.$refs.popup.close()
			},
			swiper_action(number) {
				this.swiper_current = this.old_swiper_current
				var that = this
				this.$nextTick(function() {
					var need_index = this.swiper_current + number;
					if (need_index >= that.banners.length) {
						need_index = 0
						return;
					}
					if (need_index < 0) {

						need_index = that.banners.length - 1
						return;
					}

					this.swiper_current = need_index
				});

			},
			banner_change(e) {
				console.log(e)
				this.old_swiper_current = e.current;
			},
			get_data() {

				var that = this;

				//banner
				this.service("/website/carouselList", 'get', {

				}).then(res => {
					console.log(res)
					that.banners = res.data;
				})
				//首页 - 资讯(最新三条)
				this.service("/website/specialColumnDataHot", 'get', {

				}).then(res => {
					console.log(res)
					that.specialColumnDataHot = res.data;
				})
				//首页 - 新药(最新二条)
				this.service("/website/overseasHot", 'get', {

				}).then(res => {
					console.log(res)
					that.overseasHot = res.data;
				})
				//首页 - 商城(最新三条
				this.service("/website/storeServiceHot", 'get', {

				}).then(res => {
					console.log(res)
					that.storeServiceHot = res.data;
				})
				//首页 - 同情用药(最新三条)
				this.service("/website/sympathizingHot", 'get', {

				}).then(res => {
					console.log(res)
					that.sympathizingHot = res.data;
				})
				//临床招募列表
				this.service("/website/clinicalRecruitmentHot", 'get', {

				}).then(res => {
					console.log(res)
					that.clinicalRecruitmentList = res.data;
				})
			},
			banner_click(index) {
				console.log(index)
				let item = this.banners[index]
				console.log(item)
				window.open(item.clickLink)
			},
			specialColumnDataHot_click(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/article/article_info?id=' + item.id
				})
			},
			overseasHot_click(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/new_drugs/new_drugs_info/new_drugs_info?id=' + item.id
				})
			},
			storeServiceHot_click(item) {
				uni.navigateTo({
					url: '/pages/mall/mall'
				})
			},
			sympathizingHot_click(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/information/information_info?id=' + item.id
				})
			},
			//详情
			open_clinical_recruitment_info(item) {
				uni.navigateTo({
					url: '/pages/clinical_recruitment/clinical_recruitment_info?id=' + item.id
				})
			},



		}
	}
</script>

<style lang="scss">
	.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		// height: 36px;
		border-radius: $uni-border-radius-base;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		// overflow: hidden;
	}
</style>
